<template>
  <div>
    <input
      type="text"
      class="headerInput"
      placeholder="请输入你的任务名，按回车输入"
      @keydown.enter="add"
      v-model="title"
    />
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "HeaderPart",
  data() {
    return {
      title: "",
    };
  },
  props: ["addTodo"],
  //添加事件
  methods: {
    add() {
      if (!this.title.trim()) return alert("不能输入空内容");
      const todoObj = { id: nanoid(), title: this.title, done: false };
      this.addTodo(todoObj);
      this.title = "";
    },
  },
};
</script>

<style lang="less" scoped>
.headerInput {
  width: 500px;
  margin: 0 15px;
}
</style>